<script setup lang="ts">
import type { PopoverAction } from 'vant'
import { ref } from 'vue'
const props = defineProps<{
  prescriptionId?: string
}>()
// 更多 气泡弹窗
const showPopover = ref(false)
// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '查看处方', disabled: !props.prescriptionId },
  { text: '删除订单' }
]
const emits = defineEmits<{
  (e: 'del'): void
  (e: 'showPreInfo'): void
}>()
// action 点击的这一个对象 index是索引
const onSelect = (action: PopoverAction, index: number) => {
  if (index === 1) emits('del')
  if (index === 0 && props.prescriptionId) emits('showPreInfo')
}
</script>
<template>
  <div class="more" @click.stop>
    <van-popover
      v-model:show="showPopover"
      :actions="actions"
      placement="top"
      @select="onSelect"
    >
      <template #reference>更多</template>
    </van-popover>
  </div>
</template>

<style scoped>
.more {
  color: var(--cp-tag);
  flex: 1;
  font-size: 13px;
}
</style>
